<template>
	<view>
		<view class="box">
			<view class="box_top">
				<view class="box_top_title">星级评价</view>
				<view class="box_top_box">
					<uni-rate v-model="xing" color="#bbb" active-color="#FF5A00" />
				</view>
				<view class="box_top_text" v-if="xing">
					{{ xing < 3 ? '差评' : '' }}
					{{ xing == 3 ? '中评' : '' }}
					{{ xing > 3 ? '好评' : '' }}
				</view>
			</view>
			<textarea class="box_inp" placeholder="点击输入您的评价，可以帮助更多小伙伴了解..." v-model="content" />
		</view>
		<view class="img">
			<view class="img_title">上传截图（最多6张）</view>
			<view class="img_box">
				<view class="img_box_nr" @click="add_img" v-if="img_list.length < 6">
					<image class="img_box_nr_img" src="/static/68.png" mode=""></image>
				</view>
				<view class="img_box_nr" v-for="(item, index) in img_list" :key="index">
					<image class="img_box_nr_img" :src="item" mode=""></image>
					<image class="img_box_nr_img_zw" src="/static/69.png" mode="" @click="dal_img(index)"></image>
				</view>
			</view>
		</view>
		<view class="btn">
			<view class="btn_box">
				<view class="btn_box_right" @click="submit">发布评价</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const http = inject('$http')
	const validateFields = inject('$validateFields')
	let id = ref(0)
	let content = ref(null)
	let xing = ref(0)
	let img_list = ref([])
	const submit = () => {
		if (
			validateFields([
				{
					value: xing.value,
					message: '请选择星级'
				},
				{
					value: content.value,
					message: '请输入评价'
				}
			])
		)
			return

		http
			.post('/srapi/wode/pingjia', {
				id: id.value,
				content: content.value,
				xing: xing.value,
				photo: img_list.value.join(','),
				dengji:
					xing.value == 5
						? '好评'
						: xing.value == 4 || xing.value == 3
						? '中评'
						: xing.value == 2 || xing.value == 1
						? '差评'
						: '',
				type: xing.value == 5 ? 1 : xing.value == 4 || xing.value == 3 ? 2 : xing.value == 2 || xing.value == 1 ? 3 : ''
			})
			.then((res) => {
				console.log('返回值', res)
				uni.showToast({
					mask: true,
					title: res.msg,
					icon: 'none',
					duration: 500
				})
				uni.navigateBack()
			})
	}

	const add_img = () => {
		console.log('添加1')
		uni.chooseMedia({
			count: 6 - img_list.value.length,
			mediaType: ['image'],
			sourceType: ['album', 'camera'],
			success(res) {
				console.log(res.tempFiles)
				res.tempFiles.map((item) => {
					if (img_list.value.length < 6) {
						http.upload(item.tempFilePath).then((res) => {
							console.log(res)
							if (img_list.value.length < 6) {
								img_list.value.push(res.file_path)
							}
						})
					}
				})
			}
		})
	}

	const dal_img = (index) => {
		console.log('删除1')
		img_list.value.splice(index, 1)
	}

	onLoad((option) => {
		console.log('接收传参:', option)
		id.value = option.id
	})
</script>

<style lang="less" scoped>
	.box {
		background: #ffffff;
		padding: 30rpx;
		margin-bottom: 18rpx;
		.box_top {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #e5e5e5;
			.box_top_title {
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
			}
			.box_top_box {
				margin: 0 20rpx 0 40rpx;
			}
			.box_top_text {
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
			}
		}
		.box_inp {
			width: 100%;
			padding: 30rpx 0;
			height: 180rpx;
			font-size: 24rpx !important;
			font-weight: 500;
		}
	}
	.img {
		padding: 30rpx;
		background: #ffffff;
		.img_title {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
		}
		.img_box {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			gap: 25rpx; /* 间距相等 */
			.img_box_nr {
				width: 162rpx;
				height: 162rpx;
				border-radius: 20rpx;
				position: relative;
			}
			.img_box_nr_img {
				width: 162rpx;
				height: 162rpx;
				border-radius: 20rpx;
			}
			.img_box_nr_img_zw {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 66rpx;
				height: 46rpx;
			}
		}
	}
	.btn {
		margin-top: 60rpx;
		height: 115rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
		.btn_box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			box-sizing: border-box;
			background: #fff;
			padding: 15rpx 30rpx ;
			padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
			.btn_box_left {
				width: 223rpx;
				height: 78rpx;
				background: #ffffff;
				border: 2rpx solid #2468fb;
				border-radius: 41rpx;
				font-size: 28rpx;
				font-weight: 700;
				color: #2468fb;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 21rpx;
				.btn_box_left_img {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
			.btn_box_right {
				display: flex;
				justify-content: center;
				align-items: center;
				background: #2468fb;
				border: 2rpx solid #2468fb;
				height: 78rpx;
				border-radius: 39rpx;
				flex: 1;
				font-size: 28rpx;
				font-weight: 700;
				color: #ffffff;
			}
		}
	}
	//
</style>
